<template>
  <div class="listUserIndexMain">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7">
        <Feature :titleName="'关于博主'">
          <slot>
            <el-skeleton animated class="zylMB30" v-if="skeletonTopType">
              <template #template>
                <el-skeleton-item variant="image" style="width: 120px; height: 120px; border-radius: 50%; margin: auto auto 30px auto" />
                <div class="zylSkeletonText">
                  <el-skeleton-item variant="p" class="skeletonMb10"/>
                  <el-skeleton-item variant="p" class="skeletonMb10"/>
                  <el-skeleton-item variant="p" class="skeletonMb10"/>
                  <el-skeleton-item variant="p" class="skeletonMb10"/>
                  <el-skeleton-item variant="p" class="skeletonMb10"/>
                  <el-skeleton-item variant="p" class="skeletonMb10"/>
                </div>
              </template>
            </el-skeleton>
            <div class="listUserMain">
              <div class="userImg">
                <img :src="userList.head">
              </div>
              <div class="userTextMain">
                <div class="userTextTitle">{{ userList.name }}</div>
                <div>年龄：{{ userList.age }}</div>
                <div>邮箱：{{ userList.phone }}</div>
                <div>职业：{{ userList.work }}</div>
                <div class="userTextDescription" v-html="userList.content"></div>
              </div>
            </div>
          </slot>
        </Feature>
      </el-col>
      <el-col :xs="24" :sm="17" :md="17" :lg="17" :xl="17">
        <Feature :titleName="'项目经验'">
          <slot>
            <el-skeleton :rows="4" animated v-if="skeletonListType" v-for="item in 5" class="zylMB30"/>
            <div class="listUserProject">
              <template v-for="(item, index) in projectList">
                <table>
                  <tr>
                    <td colspan="2" class="tableTitle zylTransition">{{ item.title }}</td>
                  </tr>
                  <tr>
                    <td class="tdTitleWidth">项目时间：</td>
                    <td>{{ item.creationtime }}</td>
                  </tr>
                  <tr>
                    <td class="tdTitleWidth">涉及技术：</td>
                    <td>{{ item.technology }}</td>
                  </tr>
                  <tr>
                    <td class="tdTitleWidth">职责描述：</td>
                    <td v-html="item.duty"></td>
                  </tr>
                </table>
              </template>
            </div>
          </slot>
        </Feature>
        <div class="zylPaginationMain zylMB10">
          <el-pagination background :total="pagList.total" :page-size="pagList.pageSize" @current-change="handlePageChange" layout="prev, pager, next"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import '@/assets/scss/index.scss';
import Feature from '@/components/Feature';
import Interface from './serve/api';
export default {
  // 关于作者
  name: 'userIndex',
  components: {
    Feature
  },
  data () {
    return {
      skeletonTopType: true,
      userList: '',
      skeletonListType: true,
      projectList: [],
      // 分页
      pagList: {
        total: 0,
        pageNum: 1,
        pageSize: 5,
      },
    };
  },
  mounted () {
    this.getUserIdQt();
    this.getZylProjectState();
  },
  methods: {
    // 博主信息
    getUserIdQt () {
      let params = {
        id: '1001',
      };
      Interface.getUserIdQt(params).then(res => {
        if (res.status === 200) {
          this.skeletonTopType = false;
          this.userList = res.data[0];
        };
      })
    },

    // 项目列表
    getZylProjectState () {
      let params = {
        state: '是',
        pageNum: this.pagList.pageNum,
        pageSize: this.pagList.pageSize,
      };
      Interface.getZylProjectState(params).then(res => {
        if (res.status === 200) {
          this.skeletonListType = false;
          this.projectList = res.data.list;
          this.pagList.total = res.data.total;
        }
      })
    },

    // 分页监听
    handlePageChange (val) {
      this.pagList.pageNum = val;
      this.getZylProjectState();
    },
  },
}
</script>
